<template>
	<jk-dialog
		v-model="showDialog"
		title="价格-历史记录"
		width="1100px"
		append-to-body
		:show-cancel-btn="false"
		:show-confirm-btn="false"
		:show-close-btn="true"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<jk-table border :loading="showLoading" :data="tableData" :height="dialogTableHeight - 20">
			<vxe-column title="品种" align="left" field="productName" :width="210" />
			<vxe-column title="存货类型" align="left" field="typeName" :width="90" />
			<vxe-column :title="pageFrom === 1 ? '单价' : '加工费'" align="right" field="price" :min-width="100" />
			<vxe-column :visible="pageFrom === 1" title="有效期" align="center" field="effectiveStartDate" :width="320">
				<template slot-scope="scope">
					<span>{{ scope.row.effectiveStartDate ? `${scope.row.effectiveStartDate}~${scope.row.effectiveEndDate}` : '' }}</span>
				</template>
			</vxe-column>
			<vxe-column title="创建时间" align="left" field="createTime" :width="160" />
			<vxe-column title="创建时间" align="left" field="creatorName" :width="160" />
			<vxe-column title="修改人" align="left" field="updaterName" :min-width="100" />
			<vxe-column title="修改时间" align="left" field="updateTime" :width="160" />
		</jk-table>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { quotationProductPriceHistoryPage } from '../../../api/price/rawPrice';

    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            },
            pageFrom: {
                type: Number,
                default: 1
            }
        },
        mixins: [calHeight],
        data() {
            return {
                showDialog: false,
                showLoading: false,
                tableData: []
            };
        },
        methods: {
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getDetailRequest() {
                this.showLoading = true;
                return quotationProductPriceHistoryPage({ productPriceId: this.dataId }).then(res => {
                    this.showLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                    }
                });
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal && this.dataId) {
                    this.getDetailRequest();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
.wx-notice-emp-box {
    border: solid 1px #dcdee2;
    border-radius: 4px;
    overflow: auto;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .wx-notice-emp-item {
        width: calc(100% / 5);
        padding: 2px;
        box-sizing: border-box;
    }
}
.legend-icon-label {
    font-size: 12px;
}
.legend-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}
.legend-icon-primary {
    background: #2d8cf0;
}
.legend-icon-info {
    background: #c5c8ce;
}
</style>
